<template>
  <div class="collection">
    <van-nav-bar
      title="收藏"
      left-text="返回"
      right-text=". . ."
      left-arrow
      @click-left="$router.back()"
    />
    <div
      class="hotel"
      v-for="(item, index) in collectList"
      :key="index"
      @click="godetail(item)"
    >
      <div class="left">
        <img v-lazy="item.picUrl" alt="" />
      </div>
      <div class="right">
        <div class="name">
          <h2>{{ item.name }}</h2>
        </div>
        <div class="score">
          <van-icon name="star" />
          <span>{{ item.averagePriceTip }}</span>
          <span>{{ item.monthSalesTip }}</span>
        </div>
        <div class="price">
          <div class="lefts">
            <span>{{ item.minPriceTip }}</span>
            <span>{{ item.shippingFeeTip }}</span>
          </div>
          <div class="rights">
            <span>{{ item.deliveryTimeTip }}</span>
            <span>{{ item.distance }}</span>
          </div>
        </div>
        <ul>
          <li v-for="(v, i) in item.discounts2" :key="i">{{ v.info }}</li>
        </ul>
      </div>
    </div>
    <div class="empty" v-if="collectList.length == 0">
      收藏页为空，<span @click="$router.push('/index/home')">快去逛逛吧！</span>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  methods: {
    godetail(id) {
      this.$router.push({
        path: "/detail/" + id.mtWmPoiId,
      });
    },
  },
  computed: {
    ...mapState(["collectList"]),
  },
};
</script>

<style lang="scss" scoped>
.collection {
  .hotel {
    display: flex;
    margin: 0.5333rem 0;
    // background: pink;
    .left {
      width: 2.9333rem;
      margin-right: 0.4rem;
      img {
        width: 100%;
        height: 2.6667rem;
        margin-top: 0.2667rem;
      }
    }
    .right {
      flex: 1;
      display: flex;
      flex-direction: column;
      h2 {
        font-size: 0.48rem;
        font-weight: 600;
        margin-bottom: 0.4rem;
      }
      .score {
        font-size: 0.4rem;
        color: orangered;
        margin-bottom: 0.2133rem;
        .van-icon {
          margin-right: 0.08rem;
        }
        span:last-child {
          margin-left: 0.2667rem;
          color: #666;
        }
      }
      .price {
        display: flex;
        justify-content: space-between;
        font-size: 0.3733rem;
        color: #666;
        margin-bottom: 0.2667rem;
        .lefts {
          span:first-child {
            margin-right: 0.2133rem;
          }
        }
        .rights {
          span:first-child {
            margin-right: 0.1333rem;
          }
        }
      }
      ul {
        display: flex;
        flex-wrap: wrap;
        li {
          font-size: 0.32rem;
          color: red;
          padding: 0 0.08rem;
          margin: 0.1333rem 0.1333rem 0 0;
          border: 0.0267rem solid pink;
          border-radius: 0.0533rem;
        }
      }
    }
  }
  .empty {
    text-align: center;
    padding: 2.6667rem 0;
    font-size: 0.48rem;
    span {
      color: red;
      // text-decoration: underline;
    }
  }
}

::v-deep .van-field__control {
  text-align: center;
}
::v-deep .van-button {
  height: 1.2267rem;
}
::v-deep.van-nav-bar {
  line-height: 0.64rem;
}
::v-deep .van-nav-bar__content {
  height: 1.28rem;
}
::v-deep .van-nav-bar__arrow {
  font-size: 0.4267rem;
}
::v-deep .van-nav-bar__text {
  font-size: 0.3733rem;
}
::v-deep .van-nav-bar__title {
  font-size: 0.4267rem;
}
</style>